<template>
 <div class="p-2">
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--插槽:table标题-->
      <template #tableTitle>
        <div style="font-weight: bold; margin-right: 12px;">需求人员列表</div>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls" v-if="mainId!=''"> 导出</a-button>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
      </template>
      <!--字段回显插槽-->
      <template v-slot:bodyCell="{ column, record, index, text }">
        <template v-if="column.dataIndex === 'developRole'">
          <span>{{ text || '无角色' }}</span>
        </template>
        <template v-else-if="column.dataIndex === 'email'">
          <span>{{ text || '无邮箱' }}</span>
        </template>
        <template v-else-if="column.dataIndex === 'createBy'">
          <span>{{ text || '无创建人' }}</span>
        </template>
      </template>
    </BasicTable>
   </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, unref, inject, watch, defineEmits, defineExpose } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage'
  import { getRequirementList, customerPrincipalExportXlsUrl } from './CustomersPool.api';
  import { isEmpty } from "/@/utils/is";
  import { useMessage } from '/@/hooks/web/useMessage';
  import { downloadFile } from '/@/utils/common/renderUtils';
  
  // 定义需求人员表的列
  const requirementPersonColumns = [
    { title: '角色', align: "center", dataIndex: 'developRole' },
    { title: '邮箱', align: "center", dataIndex: 'email' },
    { title: '创建人员', align: "center", dataIndex: 'createBy' },
    { title: '创建时间', align: "center", dataIndex: 'createTime' },
    { title: '所属部门', align: "center", dataIndex: 'sysOrgCode' }
  ];

  const toggleSearchStatus = ref<boolean>(false);
  //接收主表id
  const mainId = inject('customerId') || '';
  //提示弹窗
  const $message = useMessage()
  const queryParam = {};
  const emit = defineEmits(['refreshMain']);
  
  // 列表页面公共参数、方法
  const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
    tableProps: {
      api: getRequirementList,
      columns: requirementPersonColumns,
      canResize: false,
      useSearchForm: false,
      actionColumn: {
        width: 120,
        fixed:'right'
      },
      beforeFetch: (params) => {
        // 确保传递customerId参数
        if (unref(mainId)) {
          params.customerId = unref(mainId);
        }
        return Object.assign(params, queryParam);
      },
      // 自定义数据处理函数
      afterFetch: (res) => {
        // 处理API返回的数据结构
        if (res && res.result && Array.isArray(res.result)) {
          return res.result;
        }
        if (Array.isArray(res)) {
          return res;
        }
        return [];
      },
    },
    exportConfig: {
      name: '需求人员',
      url: customerPrincipalExportXlsUrl,
      params: {
        'customerId': mainId
      }
    }
  });

  //注册table数据
  const [registerTable, { reload}, { rowSelection, selectedRowKeys }] = tableContext;
  const formRef = ref();
  const labelCol = reactive({
    xs:24,
    sm:4,
    xl:6,
    xxl:4
  });
  const wrapperCol = reactive({
    xs: 24,
    sm: 20,
  });

  /**
   * 详情事件
   */
  function handleDetail(record: Recordable) {
    // 显示详情对话框
    $message.createMessage.info(`需求人员详情: 
      角色: ${record.developRole || '无角色'}, 
      邮箱: ${record.email || '无邮箱'}, 
      创建人: ${record.createBy || '无创建人'}, 
      创建时间: ${record.createTime || '无创建时间'}, 
      更新人: ${record.updateBy || '无更新人'}, 
      更新时间: ${record.updateTime || '无更新时间'}, 
      所属部门: ${record.sysOrgCode || '无所属部门'}`);
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      },
    ]
  }
  
  /**
   * 下拉操作栏
   */
  function getDropDownAction(record){
    return [];
  }
  
  /**
   * 重置
   */
  function searchReset() {
    formRef.value?.resetFields();
    selectedRowKeys.value = [];
    //刷新数据
    reload();
  }
  
  watch(mainId, () => {
    if (unref(mainId)) {
      // 使用customerId作为参数名称，确保传递正确的主表ID
      queryParam['customerId'] = unref(mainId);
    } else {
      // 如果没有选中主表，则清空子表数据
      queryParam['customerId'] = '';
      tableContext[1].setTableData([]);
    }
    reload();
  });

  defineExpose({
    reload,
    searchReset
  });
</script>
<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    padding: 0;
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust{
      min-width: 100px !important;
    }
    .query-group-split-cust{
      width: 30px;
      display: inline-block;
      text-align: center
    }
  }
</style>